import { Modal, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/lib/table/interface';
import { confirmDeviceWarning, findDeviceWarningEventList } from "@/pages/Device/Warning/List/service";
import type { DeviceWarning, WarningEvent } from "@/pages/Device/Warning/List/data";
import type { RequestData } from "@ant-design/pro-table";
import type { ActionType } from "@ant-design/pro-table/lib/Table";

interface FormProps {

  actionType?: ActionType;

  deviceWarning: DeviceWarning
  // 请求修改数据的回调
  onSubmit: (flag?: boolean) => void;
  // 取消窗口的回调
  onCancel: (flag?: boolean) => void;
  // 窗口是否可见
  modalVisible: boolean;
}

interface PaginationConfig {
  page: number;
  pageSize: number;
  total: number;
}


const WarningConfirmModal: React.FC<FormProps> = props => {
  const [ data, setData ] = useState<WarningEvent[] | undefined>(undefined);
  const [ loading, setLoading ] = useState<boolean>(false);

  const [ pageObject, setPageObject ] = useState<PaginationConfig>({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const { deviceWarning, onCancel, modalVisible } = props;

  const columns: ColumnsType<WarningEvent> = [
    {
      title: '序号',
      dataIndex: 'no',
      render: (_, record) => <Tag>{ record.no } </Tag>,
    },
    {
      title: "告警类型",
      dataIndex: 'warningType',
      render: (_, record) => <div>{ record.warningTypeDes } </div>,
    },
    {
      title: '告警时间',
      dataIndex: 'warningTime',
      render: (_, record) => <div>{ record.warningTime } </div>,
    }
  ];

  const request = async (warning: DeviceWarning, page?: number, pageSize?: number,): Promise<RequestData<WarningEvent>> => {

    const result = await findDeviceWarningEventList({
      warningId: warning.id,
      deviceNo: warning.deviceNo,
      page: page || 1,
      pageSize: pageSize || pageObject.pageSize || 10,
    });
    if (result.success) {
      setPageObject({ ...pageObject, total: result.total || 0, page: page || 1 });
    } else {
      setPageObject({ ...pageObject, total: 0, page: 1 });
    }
    return result;
  };

  const reloadHandler = (page: PaginationConfig) => {
    setLoading(true);

    request(deviceWarning, page.page || 1, page.pageSize || 10)
      .then(res => {
        if (res.success && res.data !== null) {
          setData(res.data);
          setLoading(false);
        }
      })
      .finally(() => {
      });
  }

  useEffect(() => {
    setLoading(true);
    reloadHandler(pageObject);
  }, [ props.deviceWarning ]);


  return (
    <Modal title="确认状态"
           visible={ modalVisible }
           destroyOnClose
           width={ 1200 }
           onOk={ async () => {
             await confirmDeviceWarning(deviceWarning);
             props.actionType?.reload()
             onCancel(false)
           }
           }
           onCancel={ () =>
             onCancel(false)
           }
           afterClose={ () =>
             onCancel(false)
           }
           okText="确定"
           cancelText="取消"
    >
      <Table
        columns={ columns }
        dataSource={ data }
        rowKey="no"
        loading={ loading }
        style={ { marginTop: '20px' } }
        pagination={ {
          ...pageObject,
          onChange: (page, pageSize) => {
            setPageObject({ ...pageObject, page, pageSize: pageSize || 10 });
            reloadHandler(pageObject);
          },
        } }
      />
    </Modal>
  );
};

export default WarningConfirmModal;
